<template>
  <div class="warp">
    <div class="top-box">
      <el-button size="mini" type="primary" @click="handleBtn('add', 1)">
        新增一级
      </el-button>
    </div>
    <div class="table-box">
      <el-table :data="memutData.list" row-key="id" border default-expand-all>
        <el-table-column label="菜单名称">
          <template #default="scope">
            <i :class="scope.row.ico"></i>
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由名称" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-row>
              <el-button
                size="mini"
                type="primary"
                plain
                v-if="scope.row.lvl == 1"
                @click="handleBtn('add', 2, scope.row)"
                >新增子级</el-button
              >
              <el-button
                size="mini"
                type="warning"
                plain
                @click="handleBtn('edit', '', scope.row)"
              >
                修改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                plain
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 表单弹窗 -->
    <MenuManageForm
      v-if="dialogFormVisible"
      :dialogFormVisible="dialogFormVisible"
      :detail="detail"
      @dialogVisible="dialogVisible"
    ></MenuManageForm>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import MenuManageForm from "@/components/SystemSettings/MenuManageForm.vue";
export default {
  name: "Index",
  components: {
    MenuManageForm,
  },
  setup() {
    const store = useStore();
    const memutData = computed(() => store.state.memuList); //菜单列表
    const state = reactive({
      dialogFormVisible: false, //表单弹窗
      detail: {}, //点击详情
    });
    onMounted(() => {
      store.dispatch("asyncSetMemuList"); //获取左侧菜单列表
    });
    //关闭弹窗回调
    const dialogVisible = (value) => {
      state.dialogFormVisible = value;
    };
    //新增//编辑 status:（add,edit）--修改还是新增 statueLvl:新增层级 item:修改当前行的数据
    const handleBtn = (status, statueLvl = "", item = {}) => {
      item.obj = { status: status, statueLvl: statueLvl };
      state.detail = item;
      state.dialogFormVisible = true;
    };
    //删除
    const handleDelete = (item) => {
      ElMessageBox.confirm("此操作将删除菜单, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {});
    };

    return {
      ...toRefs(state),
      memutData, //左侧菜单
      dialogVisible, //关闭弹窗回调
      handleBtn, //添加
      handleDelete, //删除
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  /********** element公共修改样式 **********/
  .table-box {
    :deep(table) {
      width: 100% !important;
    }
  }
}
</style>